<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm" style="margin-top: 0px;">
							<input id="deptId" name="deptId" th:value="${sysDept.deptId}"
								class="hidden">
							<div class="panel panel-default">
								<div class="panel-collapse collapse in">
									<div class="panel-body">
										<h4>文件上传启用策略</h4>
										<div class="form-group" style="height: 30px;">
											<label class="col-sm-3 control-label" style="font-weight: unset; width: 18%;padding-left: 0px;">是否启用名单：</label>
											<div class="col-sm-2" style="height: 30px;">
												<div class="switchOn switchOff" style="margin-top: 50px;left: 0px;" id="nameListOn">
													<em></em>
												</div>
											</div>
										</div>
										<div class="form-group" style="padding-left: 15px;" id="show1">
											<input type="radio" name="nameListType" value="1" onfocus="changeNameListType('1');">&nbsp;白名单&nbsp;&nbsp;&nbsp;
											<input type="radio" name="nameListType" value="2" onfocus="changeNameListType('2');">&nbsp;黑名单&nbsp;&nbsp;&nbsp;
										</div>
										<div style="margin-top: 30px;">
											<p onclick="showInput('whiteNameList')"><span class="panel-jia">+</span><span>&nbsp;&nbsp;&nbsp;</span>添加白名单</p>
											<div class="whiteNameList"></div>
										</div>
										<div style="margin-top: 30px;">
											<p onclick="showInputs('blackNameList')"><span class="panel-jia">+</span><span>&nbsp;&nbsp;&nbsp;</span>添加黑名单</p>
											<div class="blackNameList"></div>
										</div>
								</div>
                                </div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
<script>

	var array1;
	var array2;

	getDeptDetail();

    $(document).on('click','.switchOn',function(){
        $(this).toggleClass('switchOff');
        var switchOn=$(this).attr("class")
        if(switchOn.indexOf("switchOff") == -1) {
            changeNameListOn("1");
            $("#show1").show();
        }else {
            changeNameListOn("2");
            $("#show1").hide();
        }
    });
	
	function getDeptDetail() {
		$.ajax({
			cache : true,
			type : "POST",
			url : "/system/sysDept/getDeptDetail",
			data : {"deptId":$("#deptId").val()},
			success : function(data) {
				if (data.code == 0) {
					$("[name='nameListType'][value='" +data.sysDept.nameListType+ "']").prop("checked", "checked");
                    if(data.sysDept.nameListOn == "1"){
                        $("#nameListOn").attr("class","switchOn")
                        $("#show1").show();
                    }else {
                        $("#nameListOn").attr("class","switchOn switchOff")
                        $("#show1").hide();
                    }
                    var html1 = "";
					var whiteNameList = data.sysDept.whiteNameList;
					if(whiteNameList != "" && whiteNameList != null) {
						array1 = whiteNameList.split(",")
						for (var i=0;i<array1.length;i++){
							var obj = "'"+array1[i]+"'";
							html1 += '<p class="text_show">';
							html1 += '<span class="panel-jian" onclick="deleteNameListType('+obj+','+1+')">'+"-"+'</span>';
							html1 += '<span>&nbsp;&nbsp;&nbsp;</span><span class="text">'+array1[i]+'</span></p>';
						}
					}
					$(".whiteNameList").html(html1);
					var html2 = "";
					var blackNameList = data.sysDept.blackNameList;
					if(blackNameList != "" && blackNameList != null) {
						array2 = blackNameList.split(",")
						for (var i=0;i<array2.length;i++){
							var obj = "'"+array2[i]+"'";
							html2 += '<p class="text_show">';
							html2 += '<span class="panel-jian" onclick="deleteNameListType('+obj+','+2+')">'+"-"+'</span>';
							html2 += '<span>&nbsp;&nbsp;&nbsp;</span><span class="text">'+array2[i]+'</span></p>';
						}
					}
					$(".blackNameList").html(html2);
				}
			}
		});
	}

	function showInput(type) {
		layer.open({
			type : 2,
			title : '增加',
			maxmin : true,
			shadeClose : false, // 点击遮罩关闭层
			area : [ '400px', '320px' ],
			content : '/system/sysDept/addType?type='+type+"&deptId="+$("#deptId").val()
		});
	}

	function showInputs(type) {
		layer.open({
			type : 2,
			title : '增加',
			maxmin : true,
			shadeClose : false, // 点击遮罩关闭层
			area : [ '400px', '320px' ],
			content : '/system/sysDept/addTypes?type='+type+"&deptId="+$("#deptId").val()
		});
	}

	function changeNameListType(nameListType) {
		$("[name='nameListType'][value='" +nameListType+ "']").prop("checked", "checked");
		$.ajax({
			cache : true,
			type : "POST",
			url : "/system/sysDept/updateType",
			data : {
				"nameListType":nameListType,
				"deptId":$("#deptId").val()
			},
			success : function(data) {
				if (data.code == 0) {
					parent.layer.msg("操作成功");
				} else {
					parent.layer.alert(data.msg)
				}
			}
		});
	}

    function changeNameListOn(nameListOn) {
        $.ajax({
            cache : true,
            type : "POST",
            url : "/system/sysDept/updateType",
            data : {
                "nameListOn":nameListOn,
                "deptId":$("#deptId").val()
            },
            success : function(data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                } else {
                    parent.layer.alert(data.msg)
                }
            }
        });
    }
	
	function deleteNameListType(nameListType,type) {
		if(type == 1) {
			$.ajax({
				cache : true,
				type : "POST",
				url : "/system/sysDept/deleteNameListType",
				data : {
					"whiteNameList":nameListType,
					"deptId":$("#deptId").val()
				},
				success : function(data) {
					if (data.code == 0) {
						parent.layer.msg("操作成功");
						getDeptDetail();
					} else {
						parent.layer.alert(data.msg)
					}
				}
			});
		}else if(type == 2) {
			$.ajax({
				cache : true,
				type : "POST",
				url : "/system/sysDept/deleteNameListType",
				data : {
					"blackNameList":nameListType,
					"deptId":$("#deptId").val()
				},
				success : function(data) {
					if (data.code == 0) {
						parent.layer.msg("操作成功");
						getDeptDetail();
					} else {
						parent.layer.alert(data.msg)
					}
				}
			});
		}
	}

</script>
</body>
</html>

<style type="text/css">
	.panel-body{
		border-bottom: 1px solid #eee;
		position: relative;
	}
	.panel-jia{
		display: inline-block;
		width:22px;
		height:22px;
		border:1px solid #0e9aef;
		border-radius:50%;
		background: #0e9aef;
		color: white;
		text-align: center;
	}
	.panel-jian{
		display: inline-block;
		width:22px;
		height:22px;
		border:1px solid red;
		border-radius:50%;
		background: red;
		color: white;
		text-align: center;
	}
	*{
		margin: 0px;
		padding: 0px;
	}
	.switchOn {
		display: inline-block;
		width: 50px;
		height: 22px;
		border-radius: 22px;
		background-color: #009f3c;
		position: relative;
		vertical-align: top;
		cursor: pointer;
		position: relative;
		top: -45px;
		left: 400px;
	}
	.switchOn em {
		display: inline-block;
		width: 18px;
		height: 18px;
		border-radius:50%;
		background:#FFFFFF;
		position: absolute;
		right: 2px;
		top: 2px;
		transition: all 0.5s linear;
	}
	.switchOn:after{
		content: 'ON';
		font-size: 12px;
		position: absolute;
		left:6px;
		top: 4px;
		color: #FFFFFF;
	}
	.switchOn.switchOff{
		background-color: red;
	}
	.switchOn.switchOff em{
		left: 2px;
	}
	.switchOn.switchOff:after{
		content: '';
	}
	.switchOn.switchOff:before{
		content: 'OFF';
		font-size: 12px;
		position: absolute;
		right:5px;
		top: 4px;
		color: #FFFFFF;
	}
</style>
